<template>
  <div class="student-detail">
    <div class="nav">
      <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/ranking">牛人榜</router-link></li>
        <li><router-link to="/champion/duij">最强王者</router-link></li>
        <li><router-link to="/about">关于我们</router-link></li>
      </ul>
    </div>
    
    <div class="profile-container">
      <div class="profile-header">
        <h1 class="profile-title">{{ studentData.name }}</h1>
        <p class="profile-subtitle">{{ studentData.major }}</p>
        <span class="profile-badge" :class="{ 'top-badge': studentData.level === '最强王者' }">{{ studentData.level }}</span>
      </div>

      <div class="profile-section">
        <h2 class="section-title">技术专长</h2>
        <div class="skill-list">
          <span v-for="(skill, index) in skills" :key="index" class="skill-item">{{ skill }}</span>
        </div>
      </div>

      <div class="profile-section">
        <h2 class="section-title">主要成就</h2>
        <ul class="achievement-list">
          <li v-for="(achievement, index) in studentData.achievementList" :key="index" class="achievement-item">
            <span class="achievement-icon">{{ achievement.icon }}</span>
            <div>
              <strong>{{ achievement.title }}</strong>
              <p v-if="achievement.description">{{ achievement.description }}</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="profile-section">
        <h2 class="section-title">项目经验</h2>
        <div class="project-list">
          <div v-for="(project, index) in projects" :key="index" class="project-card">
            <h3 class="project-title">{{ project.title }}</h3>
            <p class="project-desc">{{ project.description }}</p>
          </div>
        </div>
      </div>
      
      <div class="action-buttons">
        <router-link to="/ranking" class="action-button">返回牛人榜</router-link>
        <a href="javascript:;" class="action-button download" @click="downloadPDF">下载个人简历</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getStudentById } from '@/data/students';

export default {
  name: 'StudentDetailView',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 模拟项目经验数据
      projectsData: {
        duij: [
          { title: '企业级Java应用开发', description: '参与多个大型企业级Java应用开发，负责核心模块设计和实现' },
          { title: '全栈Web应用', description: '开发多个全栈Web应用，涵盖前后端技术栈' },
          { title: '算法竞赛训练平台', description: '开发算法竞赛训练平台，帮助同学提升编程能力' },
          { title: '微服务电商平台', description: '设计并实现基于Spring Cloud的微服务电商系统，包含用户服务、商品服务、订单服务和支付服务' },
          { title: '高并发直播平台后端', description: '开发支持百万级并发的直播平台后端系统，使用Redis进行缓存优化，消息队列处理高峰流量' },
          { title: '分布式任务调度系统', description: '基于Spring Boot设计高可用的分布式任务调度系统，解决任务分配、失败重试和监控告警等问题' },
          { title: '企业级权限管理系统', description: '开发基于RBAC模型的权限管理系统，支持动态权限配置和多租户架构' }
        ],
        chenritian: [
          { title: '智能视频处理系统', description: '基于ffmpeg和OpenCV开发的视频处理系统，支持实时视频流处理和AI分析' },
          { title: 'OpenHarmony应用开发', description: '参与OpenHarmony生态建设，开发多个系统级应用' },
          { title: 'AI模型训练平台', description: '搭建企业级AI模型训练平台，支持多种深度学习框架' },
          { title: '工业质检目标检测系统', description: '基于YOLOv5和YOLOv7训练的工业质检目标检测系统，精度达到98.7%，部署在多家工厂生产线' },
          { title: '边缘检测算法优化', description: '优化并训练边缘检测模型，提高复杂场景下的边缘识别准确率，用于自动驾驶障碍物检测' },
          { title: 'YOLOv11模型部署与优化', description: '将YOLOv11模型部署至边缘计算设备，通过模型压缩和量化技术提升推理速度50%' },
          { title: '大规模分布式机器学习系统', description: '使用Python和TensorFlow设计开发分布式机器学习训练系统，支持多GPU并行训练，训练效率提升3倍' },
          { title: '智能人脸识别门禁系统', description: '基于深度学习的人脸识别系统，使用PyTorch训练模型，在复杂光照条件下识别准确率达95%以上' }
        ],
        linjiabei: [
          { title: '智能校园导航系统', description: '开发基于AI和大数据分析的校园智能导航系统，为校园提供智能化服务' },
          { title: '社交媒体数据分析平台', description: '构建社交媒体数据分析平台，挖掘用户行为模式和舆情趋势' },
          { title: '开源项目贡献', description: '积极参与多个开源项目，提交代码贡献并修复Bug' },
          { title: 'React组件库开发', description: '设计并开发一套企业级React组件库，提高团队开发效率' },
          { title: '移动端跨平台应用', description: '使用Flutter开发跨平台移动应用，支持Android和iOS双平台' },
          { title: '数据可视化平台', description: '基于ECharts和D3.js开发数据可视化平台，支持多种图表类型和交互方式' }
        ]
      }
    }
  },
  computed: {
    studentData() {
      return getStudentById(this.id);
    },
    skills() {
      return this.studentData.techStack.split('、');
    },
    projects() {
      // 根据ID返回对应的项目数据，如果没有则返回空数组
      return this.projectsData[this.id] || [];
    }
  },
  mounted() {
    // 设置页面标题
    document.title = `${this.studentData.name} - 详细资料 | 金山学院牛人榜`;
  },
  methods: {
    downloadPDF() {
      // 提示用户该功能还在开发中
      alert('详细资料PDF下载功能正在开发中，敬请期待！');
    }
  }
}
</script>

<style scoped>
body {
  font-family: 'Microsoft YaHei', sans-serif;
  margin: 0;
  padding: 80px 20px 20px;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  min-height: 100vh;
}

.student-detail {
  padding: 80px 20px 20px;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  min-height: 100vh;
}

.nav {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

.nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  color: #3a6ea5;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.nav a:hover, .nav a.router-link-active {
  background-color: #3a6ea5;
  color: white;
}

.profile-container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.profile-header {
  text-align: center;
  margin-bottom: 40px;
}

.profile-title {
  color: #3a6ea5;
  font-size: 2.5em;
  margin: 0;
}

.profile-subtitle {
  color: #666;
  font-size: 1.2em;
  margin: 10px 0;
}

.profile-badge {
  display: inline-block;
  background: #cd7f32;
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-top: 10px;
}

.top-badge {
  background: gold !important;
  color: #8b4513 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.profile-section {
  margin: 30px 0;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.section-title {
  color: #3a6ea5;
  font-size: 1.5em;
  margin-bottom: 15px;
  border-bottom: 2px solid #3a6ea5;
  padding-bottom: 5px;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.skill-item {
  background: #f0f7ff;
  color: #3a6ea5;
  padding: 8px 15px;
  border-radius: 15px;
  font-weight: bold;
}

.achievement-list {
  list-style: none;
  padding: 0;
}

.achievement-item {
  margin: 10px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.achievement-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.project-title {
  color: #3a6ea5;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.project-desc {
  color: #666;
  font-size: 0.9em;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.action-button {
  display: inline-block;
  background: #3a6ea5;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-button:hover {
  background: #2d5a8e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.action-button.download {
  background: #c22;
}

.action-button.download:hover {
  background: #a00;
}

@media (max-width: 768px) {
  .profile-title {
    font-size: 2em;
  }
  
  .project-list {
    grid-template-columns: 1fr;
  }
  
  .skill-list {
    justify-content: center;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-button {
    width: 100%;
    text-align: center;
  }
}
</style> 